<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>右键菜单</title>
    <link rel="stylesheet" href="css/style.css" />
    <!-- <script src="js/script.js"></script> -->
    <style>
      .common {
        border: 1px red solid;
        width: 100px;
        height: 100px;
        position: absolute;
      }
      .position {
        left: 300px;
        top: 300px;
      }
      .position1 {
        left: 600px;
        top: 10px;
      }
      .position2 {
        left: 800px;
        top: 190px;
      }
    </style>
  </head>

  <body>
    <div class="position common">bindSelector</div>
    <div class="position1 common">bindSelector1</div>
    <div class="position2 common">closeSelector</div>
  </body>
  <script type="module">
    import { addContextMenu } from "./js/script.js";
    console.warn('addContextMenu',addContextMenu)
    let option = {
      addId: "addMenuId", //添加到弹窗的id 【选填】
      addClass: "addMenuClass", //添加到弹窗的class 【选填】
      closeSelector: ".position2", //绑定关闭弹窗的dom   【必填】
      bindSelector: [".position", ".position1"], //绑定打开弹窗的dom 【必填】
      data: [ //【必填】
        {
          text: "测试1",
          className: "content-menu-item-danger",
          action: (e) => {
            console.warn("测试1", e);
          },
        },
        {
          text: "测试2",
          action: (e) => {
            console.warn("测试2", e);
          },
        },
        {
          text: "测试3",
          action: (e) => {
            console.warn("测试3", e);
          },
        },
        {
          className: "content-menu-item-divider",  //添加分割线
        },
        {
          text: "关闭",
          action: (e) => {
            console.warn("关闭", e);
          },
        },
      ],
    };
    new addContextMenu(option);
  </script>
</html>
